<!DOCTYPE html>
<meta charset="utf-8">
<title>Declarative Shadow DOM</title>
<link rel="author" title="Mason Freed" href="mailto:masonfreed@chromium.org">
<link rel="help" href="https://github.com/whatwg/dom/issues/831">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/helpers.js"></script>

<div id="host" style="display:none">
  <template shadowroot="open">
    <slot id="s1" name="slot1"></slot>
  </template>
  <div id="c1" slot="slot1"></div>
</div>

<script>
test(() => {
  const host = document.querySelector('#host');
  const c1 = host.querySelector('#c1');
  assert_true(!!c1);
  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
  assert_equals(host.querySelector('template'), null, "No leftover template node");
  assert_true(!!host.shadowRoot,"No shadow root found");
  const s1 = host.shadowRoot.querySelector('#s1');
  assert_equals(c1.assignedSlot, s1);
  assert_array_equals(s1.assignedNodes(), [c1]);
}, 'Declarative Shadow DOM: Basic test');

test(() => {
  assert_true(HTMLTemplateElement.prototype.hasOwnProperty("shadowRoot"),'Unable to feature detect');
}, 'Declarative Shadow DOM: Feature detection');

test(() => {
  const div = document.createElement('div');
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="open">
        <slot id="s1" name="slot1"></slot>
      </template>
      <div id="c1" slot="slot1"></div>
    </div>
    `);
  const host = div.querySelector('#host');
  const c1 = host.querySelector('#c1');
  assert_true(!!c1);
  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
  assert_equals(host.querySelector('template'), null, "No leftover template node");
  assert_true(!!host.shadowRoot,"No shadow root found");
  const s1 = host.shadowRoot.querySelector('#s1');
  assert_equals(c1.assignedSlot, s1);
  assert_array_equals(s1.assignedNodes(), [c1]);
}, 'Declarative Shadow DOM: Fragment parser basic test');

test(() => {
  const div = document.createElement('div');
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="invalid">
      </template>
    </div>
    `);
  const host = div.querySelector('#host');
  assert_equals(host.shadowRoot, null, "Shadow root was found");
  const tmpl = host.querySelector('template');
  assert_true(!!tmpl,"Template should still be present");
  const shadowrootAttr = tmpl.getAttribute('shadowroot');
  assert_equals(shadowrootAttr,"invalid","'shadowroot' attribute should still be present");
}, 'Declarative Shadow DOM: Invalid shadow root attribute');

test(() => {
  const div = document.createElement('div');
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="closed">
      </template>
    </div>
    `);
  const host = div.querySelector('#host');
  assert_equals(host.shadowRoot, null, "Closed shadow root");
  assert_equals(host.querySelector('template'), null, "No template - converted to shadow root");
}, 'Declarative Shadow DOM: Closed shadow root attribute');

test(() => {
  const div = document.createElement('div');
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="open">
        <slot id="s1" name="slot1"></slot>
    </div>
    `);
  const host = div.querySelector('#host');
  assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
  assert_equals(host.querySelector('template'), null, "No leftover template node");
  assert_true(!!host.shadowRoot,"No shadow root found");
  const s1 = host.shadowRoot.querySelector('#s1');
  assert_true(!!s1,"Slot should be inside the shadow root");
}, 'Declarative Shadow DOM: Missing closing tag');

test(() => {
  const div = document.createElement('div');
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="open" shadowrootdelegatesfocus>
      </template>
    </div>
    `);
  var host = div.querySelector('#host');
  assert_true(!!host.shadowRoot,"No shadow root found");
  assert_true(host.shadowRoot.delegatesFocus,"delegatesFocus should be true");
  setInnerHTML(div,`
    <div id="host">
      <template shadowroot="open">
      </template>
    </div>
    `);
  host = div.querySelector('#host');
  assert_true(!!host.shadowRoot,"No shadow root found");
  assert_false(host.shadowRoot.delegatesFocus,"delegatesFocus should be false without the shadowrootdelegatesfocus attribute");
}, 'Declarative Shadow DOM: delegates focus attribute');
</script>

<div id="multi-host" style="display:none">
  <template shadowroot="open">
    <span>root 1</span>
  </template>
  <template shadowroot="closed">
    <span>root 2</span>
  </template>
</div>
<script>
test(() => {
  const host = document.querySelector('#multi-host');
  assert_equals(host.querySelector('template'), null, "No leftover template nodes from either root");
  assert_true(!!host.shadowRoot,"No open shadow root found - first root should remain");
  const innerSpan = host.shadowRoot.querySelector('span');
  assert_equals(innerSpan.textContent, 'root 2', "Content should come from last declarative shadow root");
}, 'Declarative Shadow DOM: Multiple roots');

</script>

<template id="template-containing-shadow">
  <div class="innerdiv">
    <template shadowroot=open>Content</template>
  </div>
</template>
<script>
test(() => {
  const template = document.querySelector('#template-containing-shadow');
  const host1 = document.createElement('div');
  host1.style.display = 'none';
  document.body.appendChild(host1);
  host1.appendChild(template.content.cloneNode(true));
  let innerDiv = host1.querySelector('div.innerdiv');
  const shadowRoot1 = innerDiv.shadowRoot;
  assert_true(!!shadowRoot1,"Inner div should have a shadow root");
  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

  const host2 = document.createElement('div');
  host2.style.display = 'none';
  document.body.appendChild(host2);
  host2.appendChild(template.content.cloneNode(true));
  innerDiv = host2.querySelector('div.innerdiv');
  const shadowRoot2 = innerDiv.shadowRoot;
  assert_true(!!shadowRoot2,"Inner div should have a shadow root");
  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");

  assert_not_equals(shadowRoot1,shadowRoot2,'Should not get back the same shadow root');
}, 'Declarative Shadow DOM: template containing declarative shadow root');
</script>

<template id="template-containing-ua-shadow">
  <div class="innerdiv">
    <template shadowroot=open>
      <video></video> <!--Assumed to have UA shadow root-->
    </template>
  </div>
</template>
<script>
test(() => {
  const template = document.querySelector('#template-containing-ua-shadow');
  const host = document.createElement('div');
  host.style.display = 'none';
  document.body.appendChild(host);
  // Mostly make sure clone of template *does* clone the
  // shadow root, and doesn't crash on cloning the <video>.
  host.appendChild(template.content.cloneNode(true));
  let innerDiv = host.querySelector('div.innerdiv');
  const shadowRoot = innerDiv.shadowRoot;
  assert_true(!!shadowRoot,"Inner div should have a shadow root");
  assert_equals(innerDiv.querySelector('template'), null, "No leftover template node");
  assert_true(!!innerDiv.shadowRoot.querySelector('video'),'Video element should be present');
}, 'Declarative Shadow DOM: template containing declarative shadow root and UA shadow root');
</script>

<template id="template-containing-ua-shadow-closed">
  <div class="innerdiv">
    <template shadowroot=closed>
      <video></video> <!--Assumed to have UA shadow root-->
    </template>
  </div>
</template>
<script>
test(() => {
  const template = document.querySelector('#template-containing-ua-shadow-closed');
  const host = document.createElement('div');
  host.style.display = 'none';
  document.body.appendChild(host);
  host.appendChild(template.content.cloneNode(true));
  let innerDiv = host.querySelector('div.innerdiv');
  assert_true(!innerDiv.shadowRoot,"Inner div should have a closed shadow root");
}, 'Declarative Shadow DOM: template containing closed declarative shadow root and UA shadow root');
</script>

<template id="root-element-shadow">
    <template shadowroot=open>Content</template>
</template>
<script>
test(() => {
  // Root element of this template is a <template shadowroot>:
  const template = document.querySelector('#root-element-shadow');
  const host = document.createElement('div');
  host.appendChild(template.content.cloneNode(true));
  assert_equals(host.shadowRoot, null, "Shadow root should not be present");
  const tmpl = host.querySelector('template');
  assert_true(!!tmpl,"Template should still be present");
  assert_equals(tmpl.getAttribute('shadowroot'),"open","'shadowroot' attribute should still be present");
}, 'Declarative Shadow DOM: template root element');
</script>
